<template>
    <div class="bg_white" style="height: calc(100vh - 198px);">
      <a-row>
              <a-col :span="24" style="width: 100%;margin-bottom: 10px;" label="班级名称">
                  <a-form-model layout="inline" :model="formInline">
                      <a-form-model-item label="学生名称">
                          <a-input allow-clear v-model="formInline.user" style="width: 250px" placeholder="请输入学生名称" />
                      </a-form-model-item>
                      <a-form-model-item label="课程名称">
                          <a-select default-value="全部" style="width: 200px;margin: 0 0px"></a-select>
                      </a-form-model-item>
                      <a-form-model-item label="学校">
                          <a-select default-value="全部" style="width: 200px;margin: 0 0px"></a-select>
                      </a-form-model-item>
                      <a-form-model-item>
                          <a-button type="primary" html-type="submit" @click="serch">搜索</a-button>
                      </a-form-model-item>
                  </a-form-model>
              </a-col>
          </a-row>
  
      <a-modal v-model="visible" :title="title" on-ok="handleOk">
        <template slot="footer">
          <a-button key="back" @click="handleCancel"> Return </a-button>
          <a-button
            key="submit"
            type="primary"
            :loading="loading"
            @click="handleOk"
          >
            Submit
          </a-button>
        </template>
        <p>Some contents...</p>
        <p>Some contents...</p>
        <p>Some contents...</p>
        <p>Some contents...</p>
        <p>Some contents...</p>
      </a-modal>

        <a-table
          :columns="columns"
          :data-source="data"
          :pagination="false"
          bordered
          :rowKey="(record, index) => {return index;}"
        >
          <span slot="status" slot-scope="text, record">
            {{ record.status == 1 ? "启用" : "禁用" }}
          </span>
          <span slot="action" slot-scope="text, record">
              <a-icon type="edit" @click="editApplication(record)" />
            <a-icon
              type="delete"
              style="margin-left: 20px"
              @click="showDeleteConfirm(record)"
            />
          </span>
        </a-table>
        <a-pagination
          style="margin: 10px 0;"
          v-model="current"
          :page-size-options="pageSizeOptions"
          :total="total"
          show-size-changer
          :page-size="pageSize"
          @showSizeChange="onShowSizeChange"
        >
          <template slot="buildOptionText" slot-scope="props">
            <span v-if="props.value !== '50'">{{ props.value }}条/页</span>
            <span v-if="props.value === '50'">全部</span>
          </template>
        </a-pagination>
    </div>
  </template>
    
  <script>
  import contacts from "@/api/organizations";
  const columns = [
    {
      title: "学生名",
      dataIndex: "roleName",
    },
    {
      title: "学生手机号",
      dataIndex: "roleName",
    },
    {
      title: "学校名",
      dataIndex: "roleName",
    },
    {
      title: "课程名称",
      dataIndex: "roleName",
    },
    {
      title: "预报班级",
      dataIndex: "roleName",
    },
    {
      title: "确定班级",
      dataIndex: "roleName",
    },
    {
      title: "时间",
      dataIndex: "roleName",
    },
    {
      title: "状态",
      scopedSlots: { customRender: "status" },
    },
    {
      title: "操作",
      scopedSlots: { customRender: "action" },
    },
  ];
  
  const x = 3;
  const y = 2;
  const z = 1;
  const gData = [];
  
  const generateData = (_level, _preKey, _tns) => {
    const preKey = _preKey || "0";
    const tns = _tns || gData;
  
    const children = [];
    for (let i = 0; i < x; i++) {
      const key = `${preKey}-${i}`;
      tns.push({ title: key, key, scopedSlots: { title: "title" } });
      if (i < y) {
        children.push(key);
      }
    }
    if (_level < 0) {
      return tns;
    }
    const level = _level - 1;
    children.forEach((key, index) => {
      tns[index].children = [];
      return generateData(level, key, tns[index].children);
    });
  };
  generateData(z);
  
  const dataList = [];
  const generateList = (data) => {
    for (let i = 0; i < data.length; i++) {
      const node = data[i];
      const key = node.key;
      dataList.push({ key, title: key });
      if (node.children) {
        generateList(node.children);
      }
    }
  };
  generateList(gData);
  
  const getParentKey = (key, tree) => {
    let parentKey;
    for (let i = 0; i < tree.length; i++) {
      const node = tree[i];
      if (node.children) {
        if (node.children.some((item) => item.key === key)) {
          parentKey = node.key;
        } else if (getParentKey(key, node.children)) {
          parentKey = getParentKey(key, node.children);
        }
      }
    }
    return parentKey;
  };
  export default {
    data() {
      return {
        expandedKeys: [],
        searchValue: "",
        autoExpandParent: true,
        gData,
        columns,
        title:'',
        visible:false,
        total: 0,
        current: 1,
        pageSizeOptions: ["10", "20", "30", "40", "50"],
        pageSize: 10,
        formInline:{},
        selectedRowKeys: [],
      };
    },
    computed: {
      rowSelection() {
        const { selectedRowKeys } = this;
        return {
          selectedRowKeys,
          onChange: this.onSelectChange,
          hideDefaultSelections: true,
          onSelection: this.onSelection,
        };
      },
    },
    mounted() {
      this.getRole();
    },
    methods: {
      handleCancel(){
          this.visible =false;
      },
      handleOk(){
          this.visible =false;
      },
      showDeleteConfirm(obj) {
        let that = this;
        this.$confirm({
          title: "您确定要删除这条数据吗",
          content: "此操作可能有风险",
          okText: "确定",
          okType: "danger",
          cancelText: "否",
          onOk() {
            //   contacts.delOrg(obj).then((res) => {
            //     if (res.data == "删除成功") {
            //       that.$message.success("删除成功");
            //       that.getInit();
            //     }
            //   });
            alert("OK");
          },
          onCancel() {},
        });
      },
      serch(){
      },
      editApplication(value){
          this.title="修改报名"
          this.visible=true;
      },
      handleOk(){
          this.visible = false;
      },
      addApplication(){
          this.title="新增报名"
          this.visible = true;
      },
      actionUser(id) {
        this.$message.success(id);
      },
      actionMenu(id) {
        this.$message.success(id);
      },
      getRole() {
        // contacts.getRole().then(
        //   (res) => {
        //     this.data = res.data;
        //   },
        //   (err) => {}
        // );
      },
      onSelectChange(selectedRowKeys) {
        console.log("selectedRowKeys changed: ", selectedRowKeys);
        this.selectedRowKeys = selectedRowKeys;
      },
      onExpand(expandedKeys) {
        this.expandedKeys = expandedKeys;
        this.autoExpandParent = false;
      },
      onChange(e) {
        const value = e.target.value;
        const expandedKeys = dataList
          .map((item) => {
            if (item.title.indexOf(value) > -1) {
              return getParentKey(item.key, gData);
            }
            return null;
          })
          .filter((item, i, self) => item && self.indexOf(item) === i);
        Object.assign(this, {
          expandedKeys,
          searchValue: value,
          autoExpandParent: true,
        });
      },
    },
  };
  </script>
    
  <style lang="less" scoped>
  .ant-layout-header {
    background: #03212100 !important;
  }
  
  .vtl {
    .vtl-drag-disabled {
      background-color: #d0cfcf;
  
      &:hover {
        background-color: #d0cfcf;
      }
    }
  
    .vtl-disabled {
      background-color: #d0cfcf;
    }
  }
  </style>
    